<style>
  table {
    border: 1px solid #000;
    text-align: center;
    width: 240px;
  }
  th,td {
    border: 1px solid #000;
  }
  h3 {
    position: relative;
  }
</style>

<div id="app">
  <h3>小黑的礼物清单</h3>
  <table>
    <tr>
      <th>名字</th>
      <th>数量</th>
    </tr>
    <tr v-for="(item, index) in list" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.num }}个</td>
    </tr>
  </table>

  <!-- 目标：统计求和，求得礼物总数 -->
  <!-- 计算属性 -->
  <!-- <p>礼物总数：{{totalCount}} 个</p>
  <p>礼物总数：{{totalCount}} 个</p>
  <p>礼物总数：{{totalCount}} 个</p>
  <p>礼物总数：{{totalCount}} 个</p> -->
  <!-- 函数调用 -->
  <p>礼物总数：{{totalFn()}} 个</p>
  <p>礼物总数：{{totalFn()}} 个</p>
  <p>礼物总数：{{totalFn()}} 个</p>
  <p>礼物总数：{{totalFn()}} 个</p>
  <input type="text" v-model="totalCount">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      // 现有的数据
      list: [
        { id: 1, name: '篮球', num: 1 },
        { id: 2, name: '玩具', num: 2 },
        { id: 3, name: '铅笔', num: 5 },
      ]
    },
    // 计算属性写这里
    computed: {
      // 计算属性是一个函数  必须得有返回值
      totalCount () {
        console.log('我是计算属性');
        // 1 + 2 + 5
        // redece 第一个参数是函数 函数参数 第一个是上次的返回值  第二个参数是当前项 第二个参数是初始值
        let total = this.list.reduce((sum, item) => sum+item.num , 0)
        return total
      }
    },
     methods: {
      totalFn () {
        console.log('我是函数');
        let total = this.list.reduce((sum, item) => sum+item.num , 0)
        return total
      }
     }
  })
</script>